import isFunction from "./isFunction";
import isFunctionComponent from "./isFunctionComponent";
import mountNativeElement from "./mountNativeElement";

export default function mountComponent(virtualDOM, container) {
    let nextVirtualDOM = null
    // 判断是函数组件还是类组件
    if (isFunctionComponent(virtualDOM)) {
        nextVirtualDOM = buildFunctionComponent(virtualDOM)
    } else {
        nextVirtualDOM = buildClassComponent(virtualDOM)
    }
    // 创建之后的还是组件,递归调用
    // <div>&hearts;{props.titile}<Demo/></div>对于这样的没有影响？？
    if (isFunction(nextVirtualDOM)) {
        mountComponent(nextVirtualDOM, container)
    } else {
        mountNativeElement(nextVirtualDOM, container)
    }

}

function buildFunctionComponent(virtualDOM) {
    return virtualDOM.type(virtualDOM.props || {})
}

function buildClassComponent(virtualDOM) {
    const component = new virtualDOM.type(virtualDOM.props)
    const nextVirtualDOM = component.render()
    return nextVirtualDOM
}